<template>
	<uni-popup ref="bankCardpopup" type="bottom" backgroundColor="#fff">
		<view class="bankCard-view">
			<view class="bankCard-list-view">
				<view class="list-title">
					{{ popupTitle }}
				</view>
				<image class="list-close" src="@/static/images/close_popup_icon.png" mode="" @click.prevent.stop="closeMask"></image>
				<scroll-view
					style="max-height: 50vh;background: #fff;" 
					scroll-y="true" 
					refresher-enabled="true" 
					:refresher-triggered="triggered"
					:refresher-threshold="100" 
					@refresherpulling="onPulling"
					@refresherrefresh="onRefresh" 
					@refresherrestore="onRestore"
				>
					<view class="bankCard-list">
						<view class="bankCard-item" v-for="(item, index) in list" :key="index" @click="changeCheck(item)">
							<view class="bankCard-info">
								 <image class="bankCard-icon" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/images/bank_icon.png" mode=""></image> 
								<view class="bankCard-name">
									{{ item.bankName }}({{ filterCardNum(item.bankNum) }})
								</view>
							</view>
							<view class="bankCard-check">
								<image v-if="item.id == checkID" src="@/static/images/choose_icon.png" mode=""></image>
								<image v-else src="@/static/images/no_choose_icon.png" mode=""></image>
							</view>
						</view>
						<view class="bankCard-addItem" @click="addItem">
							<image class="addItem-icon" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/images/add_card_icon.png" mode=""></image>
							<view class="addItem-title">
								添加银行卡
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
	
</template>
<script>
	export default {
		data() {
			return {
				title: 'qilin-bankCardList',
				list: [],
				triggered: false,
			}
		},
		props: {
			// 选中银行卡ID
			checkID: {
				type: String,
				default () {
					return ''
				}
			},
			popupTitle: {
				type: String,
				default () {
					return '请选择收款银行卡'
				}
			},
			
			baseUrl: {
				type: String,
				default () {
					return ''
				}
			},
		},
		mounted() {
			
		},
		methods: {
			//关闭地址选择规则弹窗
			closeBankCardPopup() {
				this.$refs.bankCardpopup.close();
			},
			//打开银行列表弹窗
			openBankCardPopup() {
				this.$refs.bankCardpopup.open();
				this.$nextTick(()=>{
					this.getBankList()
				})
			},
			// 获取银行卡列表
			async getBankList() {
				this.list = await this.$apis.getUserBankList();
				
				
			},
			// 格式化银行卡信息
			filterCardNum(val) {
				let numStr = val.toString()
				let numStrLength = numStr.length
				let cardNum = ''
				if (numStrLength >= 4) {
					cardNum = numStr.substring(numStrLength-4,numStrLength)
				} else {
					cardNum = numStr
				}
				return cardNum
			},
			// 选择银行卡
			changeCheck(item) {
				if (this.checkID != item.id) {
					item.bankNum=this.filterCardNum(item.bankNum)
					this.$emit('changeBankCard', item)
					this.closeBankCardPopup()
				}
			},
			// 关闭银行卡列表弹窗
			closeMask() {
				this.closeBankCardPopup()
			},
			// 添加银行卡
			addItem() {
				this.$emit('addBank')
			},
		},
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar{
	  display: none;
	}
	.bankCard-view {
		width: 100vw;
		position: relative;
		background: #fff;
		.bankCard-list-view{
			width: 100vw;
			padding-top: 28rpx;
			padding-bottom: 48rpx;
			border-radius: 31rpx 31rpx 0rpx 0rpx;
			background: #fff;
			.list-title{
				width: 100vw;
				height: 42rpx;
				line-height: 42rpx;
				font-size: 31rpx;
				font-weight: bold;
				text-align: center;
				padding: 18rpx 0;
			}
			.list-close{
				width: 77rpx;
				height: 77rpx;
				position: absolute;
				top: 8rpx;
				right: 8rpx;
			}
			.bankCard-list{
				margin: 0 38rpx;
				.bankCard-item{
					display: flex;
					height: 121rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #E4E5E6;
					.bankCard-info{
						display: flex;
						align-items: center;
						.bankCard-icon{
							width: 46rpx;
							height: 46rpx;
							margin-right: 15rpx;
						}
						.bankCard-name{
							font-size: 31rpx;
							color: #242526;
						}
					}
					.bankCard-check{
						width: 121rpx;
						height: 121rpx;
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 36rpx;
							margin-left: auto;
						}
					}
				}
				.bankCard-addItem{
					display: flex;
					height: 100rpx;
					align-items: center;
					.addItem-icon{
						width: 42rpx;
						height: 42rpx;
						margin-right: 17rpx;
					}
					.addItem-title{
						font-size: 31rpx;
						line-height: 42rpx;
						color: #242526;
					}
				}
			}
		}
		
	}
	
</style>
